<template>
  <div class="vm">
    <div id="map" class="map-x"></div>
  </div>
</template>

<script>
// import "ol/ol.css";
// import 'ol-ext/dist/ol-ext.css'

import { Map, View } from "ol";
import * as tdtMaps from "./tdtMap";
import LayerVector from "ol/layer/Vector";
import SourceVector from "ol/source/Vector";
import { Style, Stroke, Fill } from "ol/style";
import GeoJSON from "ol/format/GeoJSON"; // 解析geojson格式
import Mask from "ol-ext/filter/Mask";
import maskJson from "@/assets/data/sy-xianjie.json";

let map;
export default {
  name: "tdtMaps",
  data() {
    return {};
  },
  methods: {
    initMask() {
      // 添加边界数据
      var maskSource = new SourceVector({
        format: new GeoJSON(),
        url: "/layerJson/sy-xianjie.json",
      });
      var maskLayer = new LayerVector({
        source: maskSource,
        style: new Style({
          stroke: new Stroke({
            color: "#0fb6e1",
            width: 2,
          }),
        }),
      });
      map.addLayer(maskLayer);
      maskSource.on("featuresloadend", (obj) => {
        // addMask(obj.features[0])
        var mask = new Mask({
          feature: obj.features[0],
          shadowWidth: 10,
          wrapX: true,
          inner: false,
          fill: new Fill({
            color: [17, 38, 59, 0.6],
          }),
        });
        tdtMaps.tileSatellite.addFilter(mask);
      });
    },
    initMaskJson() {
      const maskFilter = new Mask({
        feature: new GeoJSON().readFeature(maskJson.features[0], {
          dataProjection: 'EPSG:4326', // json的坐标系
          featureProjection: 'EPSG:4326', // 当前地图使用的坐标系
        }),
        shadowWidth:10,
        wrapX: true,
        inner: false,
        fill: new Fill({ color: 'rgba(17, 38, 59, 0.6)' }),
      })
      // const maskFilter = new Mask({
      //   feature: new GeoJSON().readFeatures(maskJson, {
      //     dataProjection: "EPSG:4326", // json的坐标系
      //     featureProjection: "EPSG:4326", // 当前地图使用的坐标系
      //   }),
      //   shadowWidth: 10,
      //   wrapX: true,
      //   inner: false,
      //   fill: new Fill({ color: "rgba(17, 38, 59, 0.6)" }),
      // });
      // 设置图层遮罩过滤
      tdtMaps.tileSatellite.addFilter(maskFilter);
    },
    initMap() {
      // 地图实例
      map = new Map({
        pixelRatio: 1,
        target: "map", // 对应页面里 id 为 map 的元素
        layers: [
          // 图层
          tdtMaps.tileSatellite,
          // tdtMaps.tileMark
        ],
        view: new View({
          // 地图视图
          constrainResolution: true,
          smoothResolutionConstraint: false,
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [119.164617, 28.242769],
          zoom: 10,
        }),
      });
      this.initMask()
      // this.initMaskJson();
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
.explain {
  position: absolute;
  left: 40%;
  bottom: 4%;
  font-weight: bold;
}
</style>
